<template>
	<view class="">
		<!-- <u-swipe-action>
			<u-swipe-action-item  :options="options" :threshold="30"> -->
		<view class="partyItem" v-for="(item,i) in list" :key="item.id">
			<view v-if="isShow">
				<view :class="['part-status', item.membersStatus==0?'blue':item.membersStatus==1?'green':'red']"
					v-if="item.membersStatus==null?false:true">
					{{item.membersStatus==0?"未处理":item.membersStatus==1?"已同意":"已拒绝"}}
				</view>
			</view>
			<view class="partyItemTitle">
				{{item.title}}
			</view>
			<view class="mainWp">
				<view class="address">
					<view class="" style="margin-right: 10rpx;">
						<u-icon name="map-fill" size="45" color="#015eea"></u-icon>
					</view>
					<view class="">
						地址：{{item.addressName?item.addressName:''}}
					</view>
				</view>
				<view class="leftImgWp">
					<view class="initiatorWp">
						<view class="" style="margin-right: 10rpx;">
							<u-icon name="account-fill" size="45" color="#015eea"></u-icon>
						</view>
						<view v-if="item.initiatorId==userInfo.openId">
							发起人：本人
						</view>
						<view v-else>
							发起人：{{item.initiator?item.initiator:"未设置"}}
						</view>
					</view>
					<view class="time">
						{{item.startTime}}
					</view>
				</view>
			</view>
			<u-line></u-line>
			<!-- 审核时关闭图标 -->
			<view class="detailWp">
				<view class="detail">
					<u-button :plain="true" @click="handleItem(item,i)" type="primary" shape="circle" color="#015eea"
						size="small" text="查看详情">
					</u-button>
				</view>
				<view v-if="!isCheckingType">
					<u-icon name="chat" v-if="canTalkComputed(item)" color="#015eea" size="65"
						@click.stop='gotoTalk(item)'></u-icon>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		name: "partyList",
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		props: {
			list: {
				type: Array,
				required: true
			},
			canTalk: {
				type: String,
				default: ''
			},
			isShow: {
				type: Boolean,
				default: true
			}
		},
		computed: {

			...mapState(['isCheckingType']),
			...mapGetters(['userInfo']),

			nowTime() {
				let time = new Date()
				return time.getMonth() + 1
			},

		},
		methods: {
			canTalkComputed(item) {
				if (this.canTalk == 'isJoin') {
					return true
				} else {
					//ru如果组局时间没超过一天 ,可以聊天
					let partyTime = new Date(item.startTime)
					let Now = Date.parse(new Date())
					partyTime = Date.parse(partyTime)
					if (Now - partyTime <= 24 * 60 * 60 * 1000 && this.canTalk == 'isHistory') {
						return true
					} else {
						return false
					}
				}
			},

			handleItem(item, index) {
				this.$emit('handleItem', {
					item,
					index
				})
			},
			async gotoTalk(item) {
				console.log(item, '组局信息');
				let payload = {
					quoteId: item.id
				}
				let res = await this.$api.goOnline(payload)
				if (res.success && res.result) {
					//进入组局聊天
					uni.navigateTo({
						url: `/pagesParty/partyChatRoom/partyChatRoom?quoteId=${item.id}&roomId=${item.roomId}&chatTitle=${item.title}`
					})
				}


			},
			//查询群聊列表
			async queryGroupChatList() {
				let payload = {
					isDel: 0,
					openId: this.openId,
					type: 0,
				}
				let res = await this.$api.queryChatList(payload)
				if (res.success) {
					console.log(res.result.records, '查询群聊列表');
					this.groupChatList = res.result.records
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			//显示删除弹窗
			showModel(item, index) {
				console.log('显示删除弹窗');
				this.$emit('showModel', {
					item,
					index
				})
			}

		},

	}
</script>

<style lang="scss">
	.partyItem {
		overflow: hidden;
		padding: 30upx 30upx 10rpx 30upx;
		margin-bottom: 30upx;
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.2);
		border-radius: 30upx;
		background-color: #fff;
		position: relative;

		.part-status {
			position: absolute;
			transform: rotate(45deg);
			top: 14rpx;
			right: -69rpx;
			color: #666666;
			font-size: 20rpx;
			width: 207rpx;
			text-align: center;
			padding: 7rpx 0;
		}



		.red {
			background-color: #fc6769;
			color: #FFFFFF;
		}

		.blue {
			background-color: #5ba0fc;
			color: #FFFFFF;
		}

		.green {
			background-color: #2ebd44;
			color: #FFFFFF;
		}

		.partyItemTitle {
			height: 29upx;
			font-size: 30upx;
			font-weight: 600;
		}

		.mainWp {
			margin: 30upx 0;


			.address {
				display: flex;
				align-items: center;
				font-size: 26upx;
				font-weight: 600;
				color: #999999;
			}

			.leftImgWp {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.initiatorWp {
					display: flex;
					align-items: center;
					font-size: 26upx;
					font-weight: 600;
					color: #999999;
				}

				.time {
					font-size: 26upx;
					font-weight: 600;
					color: #999999;
				}
			}





			.talkImgWp {
				margin-left: 30upx;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;

				.talkWp {
					width: 100upx;

					img {
						width: 50upx;
						height: 50upx;
					}
				}
			}


			.right {
				width: 40upx;

				img {
					width: 10upx;
					height: 34upx;
				}
			}
		}

		.detailWp {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>